<template>
  <div class="recommend-wrapper" ref="recommendWrapper">
    <ul class="recommend-list">
      <li class="list-item" v-for="item in goodList" :key="item.goods_id">
        <div class="item-img">
          <img :src="item.hd_thumb_url" alt="">
        </div>
        <p class="item-desc">{{item.short_name}}</p>
        <div class="item-bottom">
          <div class="price-count">
            <span class="price">￥{{item.price / 100}}</span>
            <span class="sales-tip">{{item.sales_tip}}</span>
          </div>
          <div class="discovery">
            发现
            <i class="iconfont icon-arrow-right-copy-copy-copy"></i>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'
  import BScroll from 'better-scroll'
  export default {
    name: 'RecommendList',
    mounted () {
      this._initData()
    },
    data () {
      return {
        goodList: [],
        heightArr: []
      }
    },
    methods: {
      async _initData () {
        const { data } = await axios.get('/static/mock/goodsList.json')
        // if (data.success_code === 200) {
          this.goodList = data.message.data
          this.$nextTick(() => {
            this._initScroll()
          })
      },
      _initScroll () {
        this.listScroll = new BScroll(this.$refs.recommendWrapper)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "../assets/style/mixins.styl"
  .recommend-wrapper
    // position: fixed
    // left: 0
    // right: 0
    // top: 0
    // bottom: 50px
    // background: #f5f5f5
    // overflow hidden

    .recommend-list
      width: 100%
      display flex
      justify-content space-between
      flex-wrap wrap
      background: #f5f5f5

      .list-item
        width: 49.5%
        background: #fff

        .item-img
          width: 100%

          img
            width: 100%

        .item-desc
          box-sizing border-box
          padding: 0 3px
          color: #333
          font-size 14px
          line-height: 20px
          height: 20px
          overflow hidden
        .item-bottom
          margin-top: 20px
          display flex
          justify-content space-between
          align-items center
          padding: 10px 0
          .price-count
              display flex
              align-items center
            .price
              color: $pddRed
              font-weight 700
              padding-left 5px

            .sales-tip
              font-size 10px
              color: #ccc
              margin-left: 3px
          .discovery
              padding-left 8px
              font-size 12px
              border 1px solid #c6c6c6
              border-right none
              border-top-left-radius 13px
              border-bottom-left-radius 13px
              display flex
              align-items center
              height 26px
              color #58595
              .iconfont
                vertical-align top


</style>
